<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jiang's Wedding</title>
        <meta name="keywords" content="HTML5 邀请函">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,
        user-scalable=no,maximum-scale=1.0">
        <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
        <link href="css/base.css" rel="stylesheet">
        <link href="css/fontawesome/css/all.css" rel="stylesheet">

        <!-- 图标 -->
        <link rel="shortcut icon" type="image/ico" href="css/page/background/images/back/favicon.ico">

        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <!-- <script src="js/aliyun-oss-sdk-6.8.0.min.js"></script>   -->
        
        <!-- 引用百度地图API文件 -->
        <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=U7zhU4lNHql5e2Y7MO0BTkVoLIZgaPU3"></script> -->
        <!-- 腾讯地图 -->
        <!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=4UABZ-3N3RI-TOAGG-5V3UR-R45MS-QZB5L"></script> -->
  
        <!-- 弹框 -->
        <script src="js/sweetalert2.all.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="box"id="loading">
            <div class="tail"></div>
            <div class="body">
              <div class="wing">
                <div class="yellow"></div>
                <div class="red"></div>
              </div>
            </div>
            <div class="feet">
              <div class="branch"></div>
            </div>
            <div class="hair"></div>
            <div class="head">
              <div class="patch">
                <div class="eye"></div>
              </div>
              <div class="beak">
                <div class="lower-beak"></div>
              </div>
            </div>
          </div>
        <!-- page one -->
        <article id="page1">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <!-- 内容 -->
            <div class="content one">
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>They are getting<br> married</h1>
                <h2>Save<br> the Date</h2>
                <h3>喜帖</h3>
                <!-- <h6>一 Please save the date 一</h6> -->
                <h4>许晨磊 & 姜诗涵</h4>
                
                <div class=dateinfo>
                    <div class="timeinfo">
                        <h1>Time</h1>
                        <h3>11.20</h3>
                    </div>
                    <div class="yearinfo">
                        <h1>20<br>21</h1>
                    </div>
                    <div class="addressinfo">
                        <h1>Address</h1>
                        <h3>杭州市 <br>外滩壹号大酒店</h3>
                    </div>
                </div>
                <h5>may you two always be in love</h5>
                <img src="css/page/01-index/images/dance.gif" id="onedancegif">
                <a href="#page2" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
            
        </article>
        
        <!-- page two -->
        <article id="page2">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content two" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page1" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <!-- <h1>诚挚邀请您参加婚礼</h1> -->
                <h1>喜帖</h1>
                <h3>wedding invitation</h3>
                <div class="weddingpic">
                    <img src="css/page/02-invite/images/bride.png" id="imgbride">
                    <img src= "css/page/02-invite/images/groom.png" id="imgroom">
                </div>
                <div class="twoword">
                    <span id="femaletwo">姜诗涵</span>
                    <i class="fas fa-female" id="twofico"></i>
                    <i class="fas fa-male" id="twomico"></i>
                    <span id="maletwo">许晨磊</span>
                </div>
                <h5>Let us wish you both<br> a hundred years of happiness</h5>
                <a href="#page3" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page three 新郎介绍-->
        <article id="page3">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content three" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page2" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <div class="groomword">
                    <h1 id="wordnew">新</h1>
                    <h1 id="wordlang">郎</h1>
                </div>
                <div class="groompic">
                    <img src = "css/page/03-groom/images/img.png" id="groompic1">
                    <!-- <img src = "css/page/03-groom/images/pic.jpg" id="groompic2"> -->
                    <div id="groomdiv">
                        <h1>帅气与温柔并存</h1>
                        <h2>气宇非凡</h2>
                        <h3>英俊潇洒</h3>
                        <h4>热心开朗</h4>
                        <h5>的绝世好男人</h5>
                    </div>
                </div>
                <div class="groomec">
                    <h2>the groom 许晨磊</h2>
                    <!-- <h3>新郎</h3> -->
                </div>
                <h4>山有木兮木有枝，<br>心悦君兮君不知。</h4>
                <!-- <div class="groompeople">
                    <img src="css/page/03three/images/groom.jpg">
                </div> -->
                <a href="#page4" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page four 新娘介绍-->
        <article id="page4">
            
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content four" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page3" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <div class="brideword">
                    <h1 id="bwordnew">新</h1>
                    <h1 id="wordbride">娘</h1>
                </div>
                <div class="bridepic">
                    <img src = "css/page/04-bride/images/img.png" id="bridepic1">
                    <!-- <img src = "css/page/04-bride/images/pic.jpg" id="bridepic2"> -->
                    <div id="bridediv">
                        <h1>智慧与美貌并存</h1>
                        <h2>大方得体</h2>
                        <h3>善良可爱</h3>
                        <h4>温柔美丽</h4>
                        <h5>的贤惠好女人</h5>
                    </div>
                </div>
                <div class="brideec">
                    <h2>the bride 姜诗涵</h2>
                    <!-- <h3>新娘</h3> -->
                </div>
                <h4>只愿君心似我心，<br>定不负相思意。</h4>
                <!-- 分辨率太低，gif不清晰 -->
                <!-- <div class="bridepeople">
                    <img src="css/page/04four/images/bride-dance-two.gif">
                </div> -->
                <a href="#page5" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page five 合照-->
        <article id="page5">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content five" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page4" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>响应国家号召</h1>
                <h2>降低单身人口比例</h2>
                
                <div id="fivediv">
                    <ul>
                        <li id="fiveimg1">
                            <!-- <img src="css/page/05-pic1/images/pic1.png" > -->
                        </li>
                        <li id="fiveimg2">
                            <!-- <img src="css/page/05-pic1/images/pic2.png" > -->
                        </li>
                        <li id="fiveimg3">
                            <!-- <img src="css/page/05-pic1/images/pic3.png" > -->
                        </li>
                    </ul>
                    <div id="fivediv-nav"></div>
                </div>
                <img src= "css/page/05-pic1/images/bride-fly.gif" class="fiveflybirde">
                
                <a href="#page6" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page six 合照-->
        <article id="page6">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content six" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page5" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <div id="sixTitle">
                    <span>干</span>
                    <span>了</span>
                    <span>这</span>
                    <span>碗</span>
                    <span>狗</span>
                    <span>粮</span>
                    <span>吧</span>
                </div>
                <div class="sixThreeimg">
                    <img src="css/page/06-pic2/images/1.png" id="sixThreeimg1">
                    <img src="css/page/06-pic2/images/2.png" id="sixThreeimg2">
                    <img src="css/page/06-pic2/images/3.png" id="sixThreeimg3">
                    <img src="css/page/06-pic2/images/4.png" id="sixThreeimg4">
                    <img src="css/page/06-pic2/images/5.png" id="sixThreeimg5">
                </div>
                <i class="fas fa-heart" id="sixheart"></i>
                <h2>未免吃撑，建议和对象一起食用～</h2>
                <a href="#page7" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page seven 婚礼信息-->
        <article id="page7">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content seven" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page6" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>2021.11.20</h1>
                <h2>去吃糖呀！</h2>
                <div class="sevenpic">
                    <img src="css/page/07-map/images/2.png" id="sevenpic1">
                </div>
                <div id="sevenmap">
                    <!-- <iframe src="css/page/07-map/baidumap.html" frameborder="0" scrolling="no"></iframe> -->
                    <!-- <img src="css/page/07-map/images/map.png"> -->
                    <h3>敬备喜筵.恭请光临</h3>
                    <h4>杭州市 <br>外滩壹号大酒店<br><br>婚礼期待您的见证</h4>
                </div>
                <!-- <h3>婚礼地址</h3> -->
                <img src="css/page/07-map/images/pic.gif" id="sevencoupleimg">
                <a href="#page8" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page eight form-->
        <article id="page8">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content eight" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page7" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>送上祝福</h1>
                <h2>Congratulations</h2>
                <h3>Save the Date</h3>
                <div class="formdiv">
                    <form action="#" method="post" id="eightform">
                        <input type="text" placeholder="姓名" name="username" id="username" autocomplete="off">
                        <input type="text" placeholder="请输入手机号" name="telephone" id="telephone" autocomplete="off">
                        <input type="text" placeholder="送上您的祝福" name="word" id="word" autocomplete="off">
                        <input type="submit" class="eightsubmit">
                    </form>
                </div>
                <h4>Best wishes for a lifetime of love and happiness.</h4>
                <img src="css/page/08-form/images/pic.gif" id="singlegif">
                <a href="#page11" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page nine 祝福-->
        <article id="page9">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content nine" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page11" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>祝福弹幕</h1>
                <div class="danmu">
                    <div class="barragediv">
                        <h5>0000-00-00</h5>
                        <span>test - blessing</span>
                    </div>
                   
                </div>
                <h2 id="sitetime"></h2>
                <h3>[2021年11月20日举办婚礼]</h3>
                <a href="#page10" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- page ten 问题反馈-->
        <article id="page10">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content ten" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page9" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>问题反馈</h1>
                <span>1</span>
                <textarea placeholder="反馈当前设备访问网站存在的问题，提高网站实用性，如：第4页图片被裁减。更多问题请联系我-微信WTlumos"></textarea>
                <a id="tensubmit">提交</a>
                <a href="#page1" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

         <!-- page eleven 祝福上墙-->
         <article id="page11">
            <!-- 背景 -->
            <div class="container">
                <img src="css/page/background/images/back/red.png" class="container one">
                <img src="css/page/background/images/back/gold.png" class="container two">  
            </div>
            <div class="content eleven" >
                <i class="fas fa-sort-down downiconouse"></i>
                <a href="#page8" class="linkup"><i class="fas fa-angle-double-up"></i></a>
                <h1>祝福墙</h1>
                <h2>定时刷新，期待看到您的祝福</h2>
                <div class="wall">
                   
                    <div class="walldiv">
                        <img src="css/page/11-wall/images/divimg.png">
                        <h3>test1</h3>
                        <h4>blessing</h4>
                        <h5>2021.11.20</h5>
                    </div>
                </div>
                <a href="#page10" class="linkdown"><i class="fas fa-angle-double-down"></i></a>
            </div>
        </article>

        <!-- 导航栏 -->
        <div id="nav">
            <ul>
                <li><a href="#page1" id="nav1">首页</a></li>
                <li><a href="#page2" id="nav2">邀请</a></li>
                <li><a href="#page3" id="nav3">新郎</a></li>
                <li><a href="#page4" id="nav4">新娘</a></li>
                <li><a href="#page5" id="nav5">图片</a></li>
                <li><a href="#page6" id="nav6">图片</a></li>
                <li><a href="#page7" id="nav7">地图</a></li>
                <li><a href="#page8" id="nav8">祝福</a></li>
                
                <li><a href="#page9" id="nav9">
                    <!-- <i class="fas fa-circle"></i> -->
                    弹幕
                    </a>
                </li>
                <li><a href="#page11" id="nav11">上墙</a></li>
            </ul>
        </div>

        <!-- 播放器 -->
        <div class="music">
            <img src="css/page/background/images/back/music-svg.svg" id="audioimg"> 
            <audio id="weddingmp3" src="css/page/background/images/Stuck-Like-Glue.mp3"  loop>
                浏览器不支持音频播放
            </audio>      
        </div>
        
        <script src="js/base.js"></script>
        <script src="js/01-index.js"></script>
        <script src="js/02-invite.js"></script>
        <script src="js/03-groom.js"></script>
        <script src="js/04-bride.js"></script>
        <script src="js/05-pic1.js"></script>
        <script src="js/06-pic2.js"></script>
        <script src="js/07-map.js"></script>
        <script src="js/08-form.js"></script>
        <script src="js/09-blessing.js"></script>
        <script src="js/10-problem.js"></script>
        <script src="js/11-wall.js"></script>

        <!--采用jsonp方式加载json数据，cb=callback回调函数，getJson对应于js文件中的getJson方法-->
		<!-- <script type="text/javascript" src="data/userinf.json?cb=getJson"></script> -->
    </body>
</html>